
@media (max-width:699px){.c-nav-button{font-size:12px}
}

@media (min-width:700px) and (max-width:1199px){.c-nav-button{font-size:15px}
}

@media (min-width:700px) and (max-width:749px){.c-nav-button{font-size:14px}
}

@media (min-width:1200px) and (max-width:1599px){.c-nav-button{font-size:16px}
}

@media (min-width:1600px) and (max-width:2099px){.c-nav-button{font-size:18px}
}

@media (min-width:2100px) and (max-width:2399px){.c-nav-button{font-size:20px}
}

@media (min-width:2400px) and (max-width:2699px){.c-nav-button{font-size:22px}
}

@media (min-width:2700px){.c-nav-button{font-size:24px}
}

@media (min-width:1200px){.c-nav-button{overflow:hidden;height:100%}

.o-scroll{height:100%}
}

.c-nav-button_icon,.c-nav-button_wrap{display:inline-block;}
.c-nav-button_wrap{margin:20% auto;width:60%;}

.c-nav-button{height:4em;width:4em;text-align:center; cursor: pointer;display:none;position:absolute;top:6px;right:2px;
}

.c-nav-button_line::after,.c-nav-button_line::before{content:""}



.c-nav-button{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition-delay:1.05s;transition-delay:1.05s}


.c-nav-button_wrap{-webkit-transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1)}

.c-nav-button_icon{margin-top:.35em;-webkit-transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1)}

.has-nav-open .c-nav-button_icon{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);-webkit-transition-delay:.2s;transition-delay:.2s}

.c-nav-button_line{position:relative;display:block;height:3px;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .15s 50ms,-webkit-transform .2s cubic-bezier(.4,0,.2,1) .2s;transition:opacity .15s 50ms,-webkit-transform .2s cubic-bezier(.4,0,.2,1) .2s;transition:transform .2s cubic-bezier(.4,0,.2,1) .2s,opacity .15s 50ms;transition:transform .2s cubic-bezier(.4,0,.2,1) .2s,opacity .15s 50ms,-webkit-transform .2s cubic-bezier(.4,0,.2,1) .2s}


.c-nav-button_line::after,.c-nav-button_line::before{display:block;position:absolute;top:0;left:0;right:0;height:3px;width:100%;background-color:#fff;-webkit-transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);-webkit-transform:translateZ(0);transform:translateZ(0)}

.c-nav-button_line::after{opacity:0}
.c-nav-button_icon{width:100%}

.c-nav-button_line{margin-bottom:28%}

.c-nav-button:hover .c-nav-button_line::before{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}

.has-nav-open .c-nav-button:hover .c-nav-button_line::before{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}

.c-nav-button_line:nth-child(1)::before{-webkit-transition-delay:.2s;transition-delay:.2s}

.c-nav-button:hover .c-nav-button_line:nth-child(1)::before{-webkit-transition-delay:0s;transition-delay:0s}

.has-nav-open .c-nav-button_line:nth-child(1){-webkit-transition-delay:0s,.2s;transition-delay:0s,.2s;-webkit-transform:translateY(.9em);-ms-transform:translateY(.9em);transform:translateY(.9em)}
.c-nav-button_line:nth-child(2){-webkit-transition:-webkit-transform .2s cubic-bezier(.4,0,.2,1) 50ms;transition:-webkit-transform .2s cubic-bezier(.4,0,.2,1) 50ms;transition:transform .2s cubic-bezier(.4,0,.2,1) 50ms;transition:transform .2s cubic-bezier(.4,0,.2,1) 50ms,-webkit-transform .2s cubic-bezier(.4,0,.2,1) 50ms}

.c-nav-button_line:nth-child(2)::before{-webkit-transition-delay:.1s;transition-delay:.1s}

.has-nav-open .c-nav-button_line:nth-child(2){-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition-delay:.15s;transition-delay:.15s}

.c-nav-button_line:nth-child(3){position:relative;margin-bottom:0;}

.c-nav-button_line:nth-child(3)::before{-webkit-transition-delay:0ms;transition-delay:0ms}

.c-nav-button:hover .c-nav-button_line:nth-child(3)::before{-webkit-transition-delay:.2s;transition-delay:.2s}

.has-nav-open .c-nav-button_line:nth-child(3){-webkit-transform:translateY(-.3em);-ms-transform:translateY(-.3em);transform:translateY(-.3em);opacity:0;-webkit-transition-delay:0s,.15s;transition-delay:0s,.15s}

.c-nav-button_line:nth-child(3)::after{top:.3em}


